<template>
  <view class="index-root" :style="fullStyle">
    <!--搜索框-->
    <view class="search-box">
      <u-input
          placeholder="请输入通告标题"
          prefixIcon="search"
          prefixIconStyle="font-size: 22px;color: #909399"
          clearable
          border="none"
          v-model.lazy="queryParam.noticeTitle"
          @change="resetQuery"

      >

      </u-input>
    </view>

    <view class="list-box">
      <u-list
          @scrolltolower="loadMore"
      >
        <u-list-item
          v-for="(item,index) in tableData"
          :key="index"
        >
          <view
              class="content-container"
              @click="jumpDetails(item)"
          >
            <view class="title-box">
              <view class="main-title-box">
                {{item.noticeTitle}}
              </view>
              <view class="notice-info-box">
                <span v-if="item.publisher!=null" class="name-box">作者：{{item.publisher}}</span><span>发布时间：{{item.createTime}}</span>
              </view>

            </view>
            <view class="line-box">

            </view>
            <view class="content-box">
              {{item.noticeContent}}
            </view>

          </view>
        </u-list-item>
      </u-list>
    </view>

    <u-loading-page :loading="loading"></u-loading-page>
  </view>

</template>

<script>
import {baseMixins} from "@/mixins/baseMixins";
import {GET_NOTICE} from "@/api";
import {requestGet} from "@/util/request";
import {noticeDetails} from "@/util/publicConfig";
export default {
  name: "index",
  mixins: [baseMixins],
  data() {
    return {
      queryParam: {
        pageNum: 1,
        pageSize: 15,
        noticeTitle: ''
      },
      total: 0,
      loading: false,
      tableData: []
    }
  },
  methods: {
    jumpDetails(noticeInfo) {
      this.goSubPage(`${noticeDetails}?noticeTitle=${noticeInfo.noticeTitle}&noticeContent=${noticeInfo.noticeContent}&createTime=${noticeInfo.createTime}`)
    },
    resetQuery(val) {
      this.queryParam.pageNum = 1;
      this.tableData = []
      this.getList()
    },

    loadMore() {
      if (this.total <= this.queryParam.pageNum * this.queryParam.pageSize) {
        uni.$u.toast('暂无更多数据');
        return
      }
      this.queryParam.pageNum += 1
      this.getList()
    },

    getList() {
      this.loading = true
      requestGet({
        url: GET_NOTICE,
        data: this.queryParam
      }).then(res => {
        uni.$u.toast('加载成功');
        this.tableData =  [];
        this.tableData = this.tableData.concat(res.rows.map(item => {
          item.showFlag = false
          return item
        }))
        this.total = res.total
      }).finally(e => {
        this.loading = false
      })
    }
  },

  onLoad() {
    this.getList()
  }

}
</script>

<style scoped lang="scss">

.index-root {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 10rpx 20rpx 0rpx 10rpx;

  .search-box{
    width:100%;
    height: 80rpx;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;

    .u-input {
      height: 100%;
      background: #fff;
      padding: 0rpx 20rpx !important;

      .u-input__content {
        padding-right: 30rpx;
      }

      .uni-input-input,
      .uni-input-placeholder {
        padding: 0 10rpx 0 20rpx;
        box-sizing: border-box;
      }
    }
  }

  .list-box{
    width:100%;
    height: calc(100% - 100rpx);
    margin-top: 20rpx;
    border-radius: 20rpx;

    .u-list{
      height: 100% !important;
    }

    .u-list-item{
      margin-bottom: 20rpx;
      border-radius: 20rpx;
      background: #fff;

      &:last-child{
        margin-bottom:0
      }


    }
    .content-container{
      width: 100%;
      padding: 30rpx;
      box-sizing: border-box;
      border-bottom: 2rpx solid #EFEFEF;
      border-radius: 20rpx;

      .title-box{
        min-height: 60rpx;
        height: auto;
        letter-spacing:3rpx;

        .main-title-box{
          margin-bottom: 10rpx;
        }

        .notice-info-box{
          letter-spacing:3rpx;
          font-size: 26rpx;
          white-space:nowrap;
          overflow:hidden;
          text-overflow:ellipsis;
          color:#626262;

          .name-box{
            margin-right: 30rpx;
          }
        }
      }

      .line-box{
        height:2rpx;
        background-color: #EBEBEB;
        margin-top: 15rpx;
        margin-bottom: 30rpx;
      }

      .content-box{
        height:55rpx;
        letter-spacing:3rpx;
        font-size: 33rpx;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
        color:#626262;
      }
    }
  }
}
</style>
